<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/view/conf/farmtag.tld" prefix="PF"%>
<!--工程项目表单-->
<div class="easyui-layout" data-options="fit:true">
	<div class="TableTitle" data-options="region:'north',border:false">
		<div style="height: 30px; padding: 4px; padding-right: 10px;">
			<div style="float: left; padding: 4px;">
				当前选中任务：<span id="chooseTask" data-id="">未选中</span>
			</div>
			<a id="flow_add_task_button_id"
				href="javascript:flowOparator('addTask')" iconCls="icon-add"
				class="easyui-linkbutton  flow_button" style="color: #000000;">顺序</a>

			<a id="flow_add_line_button_id"
				href="javascript:flowOparator('andTask')" iconCls="icon-add"
				class="easyui-linkbutton  flow_button" style="color: #000000;">分支</a>
			<a id="flow_bind_rule_button_id"
				href="javascript:flowOparator('bindRule')"
				iconCls="icon-application_osx_terminal"
				class="easyui-linkbutton  flow_button" style="color: #000000;">绑定条件</a>
			<!-- -------------------------------------- -->
			<a id="flow_bind_configer_button_id"
				href="javascript:flowOparator('configer')" iconCls="icon-my-account"
				class="easyui-linkbutton  flow_button" style="color: #000000;">绑定参数</a>
			<!-- -------------------------------------- -->
			<a id="flow_bind_template_button_id"
				href="javascript:flowOparator('template')" iconCls="icon-cv"
				class="easyui-linkbutton  flow_button" style="color: #000000;">绑定模板</a>
			<!-- -------------------------------------- -->
			<a id="flow_del_button_id" href="javascript:flowOparator('del')"
				iconCls="icon-remove" class="easyui-linkbutton  flow_button"
				style="color: #000000;">刪除</a>
			<!-- -------------------------------------- -->
			<a id="flow_test_button_id" href="javascript:flowOparator('test')"
				iconCls="icon-application_osx_terminal"
				class="easyui-linkbutton  flow_button" style="color: #000000;">调试</a>
			<a id="flow_delall_button_id"
				href="javascript:flowOparator('delall')"
				iconCls="icon-exclamation-red-frame"
				class="easyui-linkbutton  flow_button" style="color: #000000;">清空</a>

			<a id="flow_loadAll_button_id"
				href="javascript:flowOparator('loadall')"
				iconCls="icon-arrow_refresh" class="easyui-linkbutton  flow_button"
				style="color: #000000;">刷新</a>
		</div>
	</div>
	<div data-options="region:'center'">
		<div id="main"
			style="width: 98%; height: 365px; margin: auto; background-color: #dddddd; margin-top: 6px;"></div>
	</div>
	<div data-options="region:'south',border:false">
		<div class="div_button" style="text-align: center; padding: 4px;">
			<a id="dom_cancle_formProject" href="javascript:void(0)"
				iconCls="icon-cancel" class="easyui-linkbutton"
				style="color: #000000;">关闭</a>
		</div>
	</div>
</div>
<script type="text/javascript">
	var nodes = [];
	var relations = [];
	$(function() {
		//关闭窗口
		$('#dom_cancle_formProject').bind('click', function() {
			$('#winDesignerProject').window('close');
		});
		init();
	});
	//加载流程图
	function init() {
		$.post('proDesigner/loadData.do', {
			'projectId' : '${id}'
		}, function(flag) {
			hideAllButton();
			if (flag.STATE == 0) {
				loadGraph(flag.nodes, flag.links);
				$('#chooseTask').attr("data-id", "");
				$('#chooseTask').html("未选中");
			} else {
				var str = MESSAGE_PLAT.ERROR_SUBMIT + flag.MESSAGE;
				$.messager.alert(MESSAGE_PLAT.ERROR, str, 'error');
			}
		}, 'json');
	}
	//执行流程操作
	function flowOparator(flag) {
		if (flag == 'delall') {
			delAll();
			return;
		}
		if (flag == 'loadall') {
			init();
			var myChart = echarts.init(document.getElementById('main'));
			myChart.clear();
			return;
		}
		if (flag == 'test') {
			window.open("prorun/actives.do?projectid=${id}&pagemodel=debug", '_blank');
			return;
		}
		if (!$('#chooseTask').attr("data-id")) {
			alert('请选中一个节点或连线');
			return;
		} else {
			if (flag == 'del') {
				delTaskNode();
				return;
			}
			if (flag == 'template') {
				bindTemplateNode(2);
				return;
			}
			if (flag == 'configer') {
				bindConfigerNode(1);
				return;
			}
			if (flag == 'addTask') {
				addTask('sequence');
				return;
			}
			if (flag == 'andTask') {
				addTask('condition');
				return;
			}
			if (flag == 'bindRule') {
				addExpresstion();
				return;
			}
		}
		alert("未实现方法：" + flag);
	}
	//添加条件
	function addExpresstion() {
		if ($('#chooseTask').attr("data-id")) {
			$.farm.openWindow({
				id : 'winTasklinkEx',
				width : 600,
				height : 300,
				modal : true,
				url : "tasklink/expressform.do?"+ 'pageset.pageType='+PAGETYPE.VIEW+'&linkid=' + $('#chooseTask').attr("data-id"),
				title : '编辑条件表达式'
			});
		} else {
			$.messager.alert(MESSAGE_PLAT.PROMPT,"请选中一条关系连线",
					'info');
		}
	}
	//添加一个任务节点
	function addTask(model) {
		var parentid = $('#chooseTask').attr("data-id");
		$.post('proDesigner/addTaskNode.do', {
			'projectId' : '${id}',
			'parentId' : parentid,
			'nodeModel' : 'none',
			'flowModel' : model
		}, function(flag) {
			if (flag.STATE == 0) {
				init();
			} else {
				var str = MESSAGE_PLAT.ERROR_SUBMIT + flag.MESSAGE;
				$.messager.alert(MESSAGE_PLAT.ERROR, str, 'error');
			}
		}, 'json');
	}

	function delAll() {
		$.messager.confirm(MESSAGE_PLAT.PROMPT, "是否刪除全部任务?", function(flag) {
			if (flag) {
				var parentid = $('#chooseTask').attr("data-id");
				$.post('proDesigner/delAllNode.do', {
					'projectId' : '${id}'
				}, function(flag) {
					if (flag.STATE == 0) {
						init();
					} else {
						var str = MESSAGE_PLAT.ERROR_SUBMIT + flag.MESSAGE;
						$.messager.alert(MESSAGE_PLAT.ERROR, str, 'error');
					}
				}, 'json');
			}
		});
	}

	function delTaskNode() {
		$.messager.confirm(MESSAGE_PLAT.PROMPT, "是否刪除选定任务?", function(flag) {
			if (flag) {
				var parentid = $('#chooseTask').attr("data-id");
				$.post('proDesigner/delTaskNode.do', {
					'projectId' : '${id}',
					'nodeId' : parentid
				}, function(flag) {
					if (flag.STATE == 0) {
						init();
					} else {
						var str = MESSAGE_PLAT.ERROR_SUBMIT + flag.MESSAGE;
						$.messager.alert(MESSAGE_PLAT.ERROR, str, 'error');
					}
				}, 'json');
			}
		});
	}

	function bindConfigerNode() {
		$.farm.openWindow({
			id : 'chooseConfigerWin',
			width : 800,
			height : 500,
			modal : true,
			url : 'configer/ConfigerChooseGridPage.do',
			title : '选择参数集合'
		});
		chooseWindowCallBackHandle = function(row) {
			var parentid = $('#chooseTask').attr("data-id");
			if (row.length != 1) {
				$.messager.alert(MESSAGE_PLAT.PROMPT,
						MESSAGE_PLAT.CHOOSE_ONE_ONLY, 'info');
				return;
			}
			$("#chooseConfigerWin").window('close');
			$.post('proDesigner/bindTaskNode.do', {
				'projectId' : '${id}',
				'nodeId' : parentid,
				'nodeModel' : 'configer',
				'nodeAppId' : row[0].ID
			}, function(flag) {
				if (flag.STATE == 0) {
					init();
				} else {
					var str = MESSAGE_PLAT.ERROR_SUBMIT + flag.MESSAGE;
					$.messager.alert(MESSAGE_PLAT.ERROR, str, 'error');
				}
			}, 'json');
		};
	}

	function bindTemplateNode() {
		$.farm.openWindow({
			id : 'chooseTemplateWin',
			width : 800,
			height : 500,
			modal : true,
			url : 'template/TemplateChooseGridPage.do',
			title : '选择模板集合'
		});
		chooseWindowCallBackHandle = function(row) {
			var parentid = $('#chooseTask').attr("data-id");
			if (row.length != 1) {
				$.messager.alert(MESSAGE_PLAT.PROMPT,
						MESSAGE_PLAT.CHOOSE_ONE_ONLY, 'info');
				return;
			}
			$("#chooseTemplateWin").window('close');
			$.post('proDesigner/bindTaskNode.do', {
				'projectId' : '${id}',
				'nodeId' : parentid,
				'nodeModel' : 'template',
				'nodeAppId' : row[0].ID
			}, function(flag) {
				if (flag.STATE == 0) {
					init();
				} else {
					var str = MESSAGE_PLAT.ERROR_SUBMIT + flag.MESSAGE;
					$.messager.alert(MESSAGE_PLAT.ERROR, str, 'error');
				}
			}, 'json');
		};
	}

	//加载图
	function loadGraph(nodes, relations) {
		var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		var option = {
			animationDurationUpdate : 1500,
			animationEasingUpdate : 'quinticInOut',
			series : [ {
				type : 'graph',
				layout : 'none',
				symbolSize : 30,
				roam : true,
				label : {
					show : true
				},
				edgeSymbol : [ 'circle', 'arrow' ],
				edgeSymbolSize : [ 4, 10 ],
				edgeLabel : {
					fontSize : 20
				},
				data : nodes,
				label : {
					normal : {
						show : true,
						position : 'bottom',
						formatter : function(params) {
							return params.data.subTitle;
						}
					}
				},
				links : relations,
				lineStyle : {
					opacity : 0.9,
					width : 2,
					curveness : 0
				}
			} ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		// 添加事件监听器处理点击事件
		myChart.off('click');
		myChart.on('click', function(params) {
			chooseGraph(params, nodes, relations);
		});
	}
	function hideAllButton() {
		{//隐藏所有按钮
			//添加任务
			$('#flow_add_task_button_id').hide();
			//添加分支
			$('#flow_add_line_button_id').hide();
			//绑定流程条件
			$('#flow_bind_rule_button_id').hide();
			//绑定参数集
			$('#flow_bind_configer_button_id').hide();
			//绑定模板集
			$('#flow_bind_template_button_id').hide();
			//删除任务
			$('#flow_del_button_id').hide();
		}

	}
	//用户选中图形事件
	function chooseGraph(params, nodes, relations) {
		hideAllButton();
		if (params.data.source && params.data.target) {
			//点击连线
			//点击节点
			$('#chooseTask').html("关联关系");
			$('#chooseTask').attr("data-id",
					params.data.source + "-" + params.data.target);
			{//按钮展示策略
				//绑定流程条件
				$('#flow_bind_rule_button_id').show();
			}
		}
		if (params.data.name) {
			//点击节点
			$('#chooseTask').html(params.data.subTitle);
			$('#chooseTask').attr("data-id", params.data.name);
			{//按钮展示策略
				if (params.data.name == 'START') {
					//添加任务
					$('#flow_add_task_button_id').show();
					//添加分支
					$('#flow_add_line_button_id').show();
				}
				if (params.data.name == 'END') {

				}
				if ((params.data.name != 'START')
						&& (params.data.name != 'END')) {
					//添加任务
					$('#flow_add_task_button_id').show();
					//添加分支
					$('#flow_add_line_button_id').show();
					//绑定参数集
					$('#flow_bind_configer_button_id').show();
					//绑定模板集
					$('#flow_bind_template_button_id').show();
					//删除任务
					$('#flow_del_button_id').show();
				}
			}

		}
		$(nodes).each(function(i, obj) {
			if (obj.name == params.data.name) {
				obj.itemStyle.borderColor = '#a0c69d';
				obj.itemStyle.borderWidth = 15;
			} else {
				obj.itemStyle.borderColor = '#ffffff';
				obj.itemStyle.borderWidth = 0;
			}
		});
		$(relations).each(
				function(i, obj) {
					if (obj.source == params.data.source
							&& obj.target == params.data.target) {
						obj.lineStyle = {
							color : '#a0c69d',
							shadowColor : '#a0c69d',
							shadowBlur : 2,
						};
					} else {
						obj.lineStyle = {};
					}
				});
		loadGraph(nodes, relations)
	}
//-->
</script>